<template>
    <uni-popup ref="popup" type="center" :show="showPopup" @close="$emit('close')">
        <view class="popup-content">
            <div class="viuewb">
                <img class="tanchaung" src="/static/tanchaung1.webp" />
                <div class="positions">
                    <div class="close" @click="closed"></div>
                    <div class="results">
                        您答对了 {{ correctCount }} 题，共 {{ totalCount }} 题
                    </div>
                    <div class="defen">{{ score }}<text class="fen">分</text></div>

                    <div class="tishi" v-if="score < 100">今日答题次数已用完</div>
                    <div class="tishi" v-else>恭喜您获得满分！</div>

                    <div class="yaoqing">抽奖规则: 邀请好友可得一次抽奖邀请好友可得一次抽奖邀请好友可得一次抽奖邀请好友可得一次抽奖邀请好友可得一次抽奖邀请好友可得一次抽奖</div>

                    <div class="choujiang">
                        <image v-if="score !== 100" class="img" src="/static/reset.png" mode="widthFix" @click="reset">
                        </image>

                        <!-- 得满分了 才能显示这个 去抽奖按钮 -->
                        <image v-if="score === 100" class="img" src="/static/1s.png" mode="widthFix" @click="handleLottery">
                        </image>

                        <!-- 邀请好友按钮 -->
                        <image class="img" src="/static/yaoqing.png" mode="widthFix" @click="handleInvite"></image>
                    </div>
                </div>
            </div>
        </view>
    </uni-popup>
</template>

<script>
import request from '@/utils/request.js';
export default {
    props: {
        score: {
            type: Number,
            default: 0
        },
        correctCount: {
            type: Number,
            default: 0
        },
        totalCount: {
            type: Number,
            default: 0
        },
        showPopup: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        }
    },
    created() {
        // setTimeout(() => {
        //     this.open();
        // }, 1000);
    },
    watch: {
        showPopup(newVal) {
            if (newVal) {
                this.open();
            } else {
                this.closed();
            }
        }
    },
    methods: {
        reset() {

            this.$emit("reset")
            this.closed();
        },
        // 复制链接到剪贴板
        copyLink(link) {
            uni.setClipboardData({
                data: link, // 要复制的链接
                success: () => {
                    uni.showToast({
                        title: '链接已复制,去微信粘贴吧',
                        icon: 'success'
                    });
                },
                fail: (err) => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                    console.error('复制失败:', err);
                }
            });
        },
        async open() {
            this.$refs.popup.open()

        },
        closed() {
            this.$refs.popup.close()
        },
        async handleLottery() {
            if (this.correctCount == this.totalCount) {
                let respons = await request({
                    url: "/api/question/answer",
                    data: {
                        iscorrect: this.correctCount == this.totalCount ? true : false,
                        user_id: JSON.parse(localStorage.getItem("userinfo")).id
                    },
                    method: 'GET',
                })
            }
            uni.navigateTo({
                url: '/pages/draw/index'
            });
        },
        async handleInvite() {
            //从接口里面获取邀请码,然后复制链接  
            let respons = await request({
                url: "/api/question/getInvitationCode",
                method: 'GET',
            })
            localStorage.setItem("InvitationCode", respons.InvitationCode)
            let userinfo = JSON.parse(localStorage.getItem("userinfo"))
            this.copyLink(window.location.origin + "#/?invite_code=" + userinfo.invite_code)
        }
    },
}
</script>
<style scoped>
.results {
    font-weight: bold;
    text-align: center;
    font-size: 35rpx;
}

.close {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    top: 0;
    right: 0;
}

.yaoqinghy {
    width: 200rpx;
    line-height: 60rpx;
    color: white;
    text-align: center;
    height: 60rpx;
    background: linear-gradient(to top, rgb(33, 155, 255), rgb(0, 83, 238));
    border-radius: 30rpx;
    border-top: solid 1px rgb(206, 206, 206);
}

.img {
    width: 200rpx;
    display: block;
    margin: 0 20rpx;
}

.choujiang {
    display: flex;
    justify-content: center;
    justify-items: center;
    margin-top: 30rpx;
}

.yaoqing {
    text-align: left;
    font-size: 27rpx;
    width: 80%;
    line-height: 40rpx;
    margin: 0 auto;
    margin-top: 70rpx;
    color: rgb(56, 56, 56);
}

.tishi {
    text-align: center;
    color: rgb(0, 58, 105);
    margin-top: 20rpx;
}

.fen {
    font-size: 40rpx;
}

.defen {
    font-size: 180rpx;
    text-align: center;
    font-weight: bold;
    color: rgb(0, 166, 231);
}

.tanchaung {
    width: 100%;
}

.viuewb {
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
    position: relative;
}

.positions {
    width: 100%;
    padding-top: 110rpx;
    position: absolute;
    top: 0;
    left: 0;
}
</style>